<!DOCTYPE html >
<html>
<head>
	<meta charset="utf-8">
	<title>JTOPO特殊直线</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
	<script src="jtp/jtopo-0.4.8-min.js" type="text/javascript"></script>


</head>
<body>
<canvas width="800"height="500"id="canvas"style=" background-color:#EEEEEE; border:1px solid #444;">
</canvas>
</body>
</html>
<script type="text/javascript">
	window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
	JTopo.Link.prototype.drawanimepic=function(imgurl,scene,width,height){
		var imgnode=new JTopo.Node();

		imgnode.setSize(width?width:16,height?height:16)
		imgnode.setImage(imgurl);
		imgnode.zIndex=2.5;
		var thislink=this;
		this.isremove=false;
		function b(a, b) {
			var c = [];
			if (null == a || null == b) return c;
			if (a && b && a.outLinks && b.inLinks) for (var d = 0; d < a.outLinks.length; d++) for (var e = a.outLinks[d], f = 0; f < b.inLinks.length; f++) {
				var g = b.inLinks[f];
				e === g && c.push(g)
			}
			return c
		}
		function c(a, c) {
			var d = b(a, c),
					e = b(c, a),
					f = d.concat(e);
			return f
		}
		function d(a) {
			var b = c(a.nodeA, a.nodeZ);
			return b = b.filter(function(b) {
				return a !== b
			})
		}
		thislink.removeHandler = function() {
			this.isremove=true;
			var a = this;
			this.nodeA && this.nodeA.outLinks && (this.nodeA.outLinks = this.nodeA.outLinks.filter(function(b) {
				return b !== a
			})),
			this.nodeZ && this.nodeZ.inLinks && (this.nodeZ.inLinks = this.nodeZ.inLinks.filter(function(b) {
				return b !== a
			}));
			var b = d(this);
			b.forEach(function(a, b) {
				a.nodeIndex = b
			})
		};
		function imgnodeanime(){
			if(!thislink.isremove){
				if(thislink.nodeA.outLinks){
					var xs=thislink.nodeA.cx- thislink.nodeZ.cx,
						xy=thislink.nodeA.cy- thislink.nodeZ.cy,
						l = Math.floor(Math.sqrt(xs * xs + xy * xy)),
						j=l;
					xl=xs/ l, yl=xy/l;
					var animespeed=(new Date()/33);
					var colorpoint=parseInt(animespeed%l);
					imgnode.rotate=(Math.atan(xy/xs))+(xs>0?Math.PI:0);
					imgnode.cx=thislink.nodeA.cx-colorpoint*xl;
					imgnode.cy=thislink.nodeA.cy-colorpoint*yl;
					window.requestAnimationFrame(imgnodeanime);
				}
			}else{
				scene.remove(imgnode)
			}
		}
		window.requestAnimationFrame(imgnodeanime);
		scene.add(imgnode);
		return imgnode;
	};
	var canvas = document.getElementById('canvas'); //舞台
	var stage = new JTopo.Stage(canvas);//场景
	//显示工具
	var scene = new JTopo.Scene(stage);
	var node = new JTopo.Node("Hello");
	node.setLocation(10, 10);
	scene.add(node);
	var node2 = new JTopo.Node("Hello");
	node2.setLocation(400, 200);
	scene.add(node2);
	var link1=new JTopo.Link(node,node2);
	var arrownode=link1.drawanimepic("img/testspecialline1.png",scene);
	link1.strokeColor="255,0,255";//圆边
	scene.add(link1)
</script>